<!DOCTYPE html>
<html>
<head>
    <meta charset='UTF-8'>
    <title>条件渲染</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h2>当前的n值是{{n}}</h2>
        <button @click="n++">点击n+1</button>
        <!-- 使用v-show做条件渲染 -->
        <!-- <h2 v-show="false">欢迎来到{{name}}</h2> -->
        <!-- <h2 v-show="1===1">欢迎来到{{name}}</h2> -->

        <!-- 使用v-if做条件渲染 -->
        <!-- <h2 v-if="false">欢迎来到{{name}}</h2> -->
        <!-- <h2 v-if="1===1">欢迎来到{{name}}</h2> -->
        <!-- 切换频率高用v-show，切换频率低用v-if，因为v-if是删除添加了节点 -->

        <!-- v-show做条件渲染 -->
        <!-- <div v-show="n%3 === 1">陆沉</div>
        <div v-show="n%3 === 2">查里苏</div>
        <div v-show="n%3 === 0">齐司礼</div> -->

        <!-- v-else和v-else-if -->
        <!-- <div v-if="n===1">陆沉</div>
        <div v-else-if="n===2">查里苏</div>
        <div v-else-if="n===3">齐司礼</div>
        <div v-else="n===4">萧逸</div> -->

        <!-- <div v-show="n===1">
        <h2>陆沉</h2>
        <h2>查里苏</h2>
        <h2>齐司礼</h2>
        </div> -->

        <!-- v-if与template配合使用 -->
        <template v-if="n===1">
            <h2>陆沉</h2>
            <h2>查里苏</h2>
            <h2>齐司礼</h2>  
        </template>

    </div>
</body>
<!--   JS   -->
    <script>
        new Vue({
            el:'#root',
            data:{
                name:'光启市',
                n:0
            }
        })
    </script>
</html>